VelocityScrollPanel

VelocityScrollPanel listens to scroll inertia and maps it to CSS variables, creating a dynamic gradient backdrop for ThorAPI ContentData lists.

When to Use

• Stream announcements beneath an AuroraHero hero.
• Showcase content updates beside MagneticFeatureCard pricing blocks.
• Highlight success stories before linking out to ContentReader.

Props

Prop	Type	Description
items	ContentData[]	Records to render; falls back to Valkyr-flavored defaults.
maxHeight?	number	Caps visible height before scrollbars appear (default 420).
onSelect?	(item: ContentData) => void	Invoked when the CTA is clicked.
ctaLabel?	string	Override the default "Open brief" wording.

Usage

import VelocityScrollPanel from "@valkyr/component-library/VelocityScrollPanel";
import { ContentData } from "@thor/model";

const releases: ContentData[] = [
  {
    id: "release-1",
    title: "GridHeim x ThorAPI",
    subtitle: "Spreadsheet intelligence now powers workflow branching.",
    authorName: "Valor",
  },
  {
    id: "release-2",
    title: "SageChat copilots",
    subtitle: "Proactive assistants now surface metrics from VelocityScrollPanel feeds.",
    authorName: "AI Services",
  },
];

<VelocityScrollPanel
  items={releases}
  onSelect={(item) => console.log("open", item.id)}
  ctaLabel="Read update"
/>;

Implementation Notes

• Scroll listener is passive and sets CSS custom property --velocity-factor for downstream sync.
• Background gradients adjust smoothly across browsers thanks to the clamp helper in JS + CSS.
• Works inside Grid layouts and modals by respecting explicit maxHeight.

Cross Links

• Use OrbitalIconCloud alongside to introduce partner updates.
• Pair with AuroraHero for a cohesive animated landing page.
• Embed AudioPlayer entries in the panel footer for podcast or release notes.